<template>
  <div class="goods page">
    <select-num  :alias="alias" :options="goodsList" class="plane" :items="items" label="物料"  icon="iconwuliaoguanli"></select-num>
    <div class="price" v-if="apply.price">总价: {{apply.price}}元</div>
    <div class="price" v-else>总价: {{totalPrice}}元</div>
    <text-input class="plane" desc="单位名称" v-model="apply.unit"   label="使用单位"></text-input>
    <text-area v-model="apply.address" title="收件地址电话收件人"  class="plane summary" icon="iconwuliaoguanli" ></text-area>
    <text-area v-model="apply.remark" title="用途/备注"  class="plane summary" icon="iconzongjie" ></text-area>
    <div @click="confirm" class="btn" v-if="canEdit">提交</div>
<!--    <div class="price">本年度已经申请: {{sumText}}元</div>-->
<!--    <span class="more" @click="more()">申请记录</span>-->
  </div>
</template>

<script>
import selectNum from '../../../components/form/select-num'
import textArea from '../../../components/form/text-area'
import textInput from '../../../components/form/text-input'
import { list } from '../../../api/goods'
import { applyGoods, getGoods, goodsSum } from '../../../api/apply'
import { showCorrect } from '../../../dialog'
import { mapState } from '_vuex@3.6.2@vuex'

export default {
  components: {
    selectNum, textArea, textInput
  },
  computed: {
    ...mapState({
      uid: state => state.user.id
    }),
    canEdit () {
      if (!this.apply.id) {
        return true
      }
      // else {
      //   if (this.apply.status == 0 && this.apply.userId == this.uid) {
      //     return true
      //   }
      // }
      return false
    },
    totalPrice () {
      let total = 0
      this.items.forEach(item => {
        if (this.goodsList[item.index] && item.number) {
          total += this.goodsList[item.index].price * item.number
        }
        // total += this.goodsList[item.index].price * item.number
      })
      return total.toFixed(2)
    },
    sumText () {
      if (this.apply.id) {
        return this.sum
      } else {
        return this.sum + this.amount
      }
    },
    amount () {
      let amount = 0.00
      this.items.forEach(goods => {
        if (goods.value && goods.number) {
          amount += this.priceMap[goods.value] * parseInt(goods.number)
        }
      })
      return amount
    }
  },
  created () {
    goodsSum().then(res => {
      this.sum = res.data
    })
    this.apply.id = this.$route.query.id
    if (this.apply.id) {
      getGoods(this.apply.id).then(res => {
        this.apply = res.data
        this.items = res.extra.items.map(item => {
          return {
            value: item.goodsId,
            text: item.goodsName,
            number: item.number
          }
        })
      })
    }
    // 获取物料信息
    list().then(res => {
      this.goodsList = res.data
      this.goodsList.forEach(goods => {
        this.priceMap[goods.id] = goods.price
      })
    })
  },
  methods: {
    more () {
      this.$router.push('/apply/bus/list')
    },
    confirm () {
      const ids = this.items.map(item => {
        return item.value
      })
      const nums = this.items.map(item => {
        return item.number
      })
      applyGoods(ids, nums, this.apply.remark, this.apply.address, this.apply.unit).then(res => {
        showCorrect('申请成功,等待审核').then(res => {
          this.$router.push('/apply/goods/list')
        })
      })
    }
  },
  data () {
    return {
      sum: 0.00,
      priceMap: {},
      apply: {
        remark: '',
        unit: null,
        address: null
      },
      items: [{}],
      goodsList: [],
      alias: {
        value: 'id',
        text: 'name'
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .goods
    overflow scroll
    padding-bottom 20px
    .price
      font-size 18px
      color red
      padding-left 10px
      margin-top 10px
    .plane
      margin-top 20px
    .btn
      margin-top 20px
      height:44px;
      background:rgba(0,156,78,1);
      border-radius:20px;
      dpr-font(14Px)
      color white
      display flex
      align-items center
      justify-content center
    .more
      margin-top 20px
      color gray
      display flex
      align-items center
      justify-content center
      dpr-font(12Px)
</style>
